<template>
    <Modal :mask-closable="false"
            title="请分配人员"
            v-model="memberVisible"
            :width="1200"
    >
        <Row :gutter="16">
            <Col :span="18">
                <Input v-model="searchKey" :placeholder="`${$t('common.inputInfo')}`"/>
            </Col>
            <Col :span="6">
                <Button type="primary" @click="onsearch">{{$t('common.Query')}}</Button>
            </Col>
        </Row>
        <Row :gutter="16" v-if="!showStates" style="height: 650px;overflow-y: scroll;margin-top: 5px;">
            <Col :span="4"  class="margin10" v-for="item in memberList" :key="item.id">
                <div class="member" @click="handleMemberMul(item)">
                    <img v-if="item.checked" src="~images/workorder/checked.png" class="icon-position"/>
                    <img v-if="!item.checked" src="~images/workorder/unchecked.jpg" class="icon-position"/>
                    <div class="member-item"><span>工号:</span><span>{{ item.empno }}</span></div>
                    <div class="member-item"><span>姓名:</span><span>{{ item.realname }}</span></div>
                </div>
            </Col>
        </Row>
        <Row v-if="showStates">
            <div style="width: 70px;height: 80px;line-height: 80px;margin: 0px auto;">
                暂无数据
            </div>
        </Row>
        <div slot="footer">
            <Button type="default" @click="handleCancel">{{$t('common.Cancle')}}</Button>
            <Button type="primary" :loading="loadingVisible" @click="handleOk">{{$t('maintenance.Confirmed')}}</Button>
        </div>
    </Modal>
</template>

<script>
    export default {
        name: "signleCommonModal",
        data() {
            return {
                id: '',
                searchKey: '',
                type: '',
                memberVisible: false,
                loadingVisible: false,
                memberList: [],
                showStates:false,
            }
        },
        created() {
        },
        methods: {
            show(order,type,str) {
                this.searchKey = ''
                this.memberVisible = true
                this.type = type
                this.id = order.id
                this.onsearch(str)
            },
            onsearch(str) {
              console.log('这啥')
              console.log(str)
                let data = {
                  empno: this.searchKey
                }
                this.axios({
                    method: 'post',
                    url: '/dms/workOrder/getUsers',
                    data
                }).then(res => {
                    if (res.code === 200) {
                        if(!res.data.length) {
                            // this.$Message.warning(({content:'请输入正确的工号或姓名!',duration:6,closable:true}))
                            // return false
                            this.showStates=true;
                        }else{
                            this.showStates=false;
                        }
                        this.memberList = res.data.map(item => {
                            return {
                                ...item,
                                checked: false
                            }
                        })
                      if (str){
                        this.memberList.forEach(item=>{
                          for (let val of str.split(',')){
                            if (item.empno == val){
                              item['checked'] = true
                            }
                          }
                        })
                      }
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            handleMemberMul(item) {
              if (this.type === 'more'){
                this.memberList.forEach( list => {
                  if (list.id === item.id) {
                    list.checked = !list.checked
                  }
                })
              }else {
                this.memberList.forEach( list => {
                  if (list.id === item.id) {
                    list.checked = true
                  }else {
                    list.checked = false
                  }
                })
              }
            },
            handleCancel() {
                this.memberVisible = false
                this.memberList = []
            },
            handleOk() {
                if (this.type == 2 || this.type == 'more') {
                    let count = 0
                    let userIds = []
                    let userName = []
                    this.memberList.map(item => {
                        if (item.checked) {
                            count = count + 1
                            userIds.push(item.empno)
                            userName.push(item.realname)
                        }
                    })
                    if (!count) {
                        this.$Message.warning(({content:'请选择分配人员！',duration:6,closable:true}))
                        return false
                    }
                    this.$emit('handleRefresh', userIds,userName)
                    this.memberVisible = false
                    this.memberList = []
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .member {
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(221, 221, 221, 1);
        border-radius: 3px;
        box-shadow: 3px 2px 5px rgba(0, 0, 0, .1);
        position: relative;
        .icon-position {
            position: absolute;
            right: 0;
            top: 0;
            width: 24px;
            height: 24px;
        }
        .member-item {
            line-height: 30px;
            font-size: 14px;
            margin-top: 16px;
            span {
                &:nth-child(1) {
                    display: inline-block;
                    width: 40%;
                    text-align: right;
                    color: #999;
                }
                &:nth-child(2) {
                    display: inline-block;
                    width: 60%;
                    text-align: center;
                    font-family: 'Helvetica', sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 12px;
                    color: #333;
                    /*color: #000*/
                }
            }
        }
    }
    ::v-deep.bgBlue {
        background-color: #e6f7ff;
        color: #1890ff;
    }
    .margin10 {
        margin-top: 10px;
    }

</style>
